<template>
  <div class="app-table-action-button">
    <el-space :size="15">
      <el-tooltip class="item" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top">
        <el-button :icon="Search" circle @click="toggleSearch()" />
      </el-tooltip>
      <el-tooltip class="item" content="刷新" placement="top">
        <el-button :icon="Refresh" circle @click="refresh()" />
      </el-tooltip>
      <el-tooltip class="item" content="显隐列" placement="top" v-if="columns">
        <el-button :icon="Operation" circle @click="showColumn()" />
      </el-tooltip>
    </el-space>
  </div>
</template>
<script lang="ts" setup name="TableToolBar">
import { set } from '@vueuse/core'
import { Search, Refresh, Operation } from '@element-plus/icons-vue'

export interface ToolBarProps {
  showSearch: boolean
  columns?: any
}

const props = withDefaults(defineProps<ToolBarProps>(), {
  showSearch: true,
  columns: [],
})

// 是否显示弹出层
const open = ref(false)
const emit = defineEmits(['update:showSearch', 'query-table'])
const show = () => emit('update:showSearch', !props.showSearch)
// 搜索
const toggleSearch = () => {
  show()
}
// 刷新
const refresh = () => {
  emit('query-table')
}
// 打开显隐列dialog
const showColumn = () => {
  set(open, true)
}
</script>
<style lang="scss"></style>
